<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="items"
      :loading="loading"
      hide-actions
      class="elevation-3"
    >
      <template slot="items" slot-scope="props">
        <td>
          <v-chip class="white--text" color="secondary">
            <v-avatar color="primary darken">{{ props.item.name[0] }}</v-avatar>
            {{ props.item.name }}
          </v-chip>
        </td>
        <td>{{ props.item.list.length }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon class="mx-0" @click="handleUpdate(props.item)">
            <v-icon color="teal">edit</v-icon>
          </v-btn>
          <v-btn icon class="mx-0" @click="handleDelete(props.item)">
            <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
      </template>
      <template slot="footer">
        <td colspan="100%">
          <v-layout>
            <v-spacer></v-spacer>
            <v-btn @click="handleAdd" color="primary">{{$t('announcement.addTag')}}</v-btn>
          </v-layout>
        </td>
      </template>

      <template slot="no-data">
        <v-btn color="primary">{{$t('refresh')}}</v-btn>
      </template>
    </v-data-table>

    <v-dialog v-model="dialog" max-width="400px">
      <v-card>
        <v-card-text>
          <v-text-field v-model="tagName" :label="$t('announcement.tagName')"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click.native="dialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="teal lighten-1 white--text" @click.native="handleSave">{{$t('save')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="delDialog" max-width="400px">
      <v-card>
        <v-card-text>你确定要删除 <span>{{delTagName}}</span>吗?</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click.native="delDialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="error lighten-1 white--text" @click.native="remove">{{$t('sure')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  </div>
</template>

<script>
import { fetchTags, addTag, delTag, updateTag } from '@/api/announcement'
export default {
  data: () => ({
    items: [],
    dialog: false,
    delDialog: false,
    mode: 'add',
    delTagName: '',
    delTagId: '',
    tagName: '',
    updateTagId: '',
    loading: false,
    headers: [
      { text: '标签名', value: 'name', align: 'left', class: 'subheading', sortable: false },
      { text: '已标记通知数', value: 'list.length', align: 'left', class: 'subheading', sortable: true },
      { text: '修改', value: 'name', align: 'center', class: 'subheading', sortable: false }
    ]
  }),
  methods: {
    getDataFromApi() {
      this.loading = true
      fetchTags(this.$store.getters.team).then(res => {
        this.items = res.data.tags
        this.loading = false
      })
    },
    handleAdd() {
      this.tagName = ''
      this.dialog = true
      this.mode = 'add'
    },
    handleDelete(tag) {
      if (tag.list.length) return this.$notify.warning('暂时不能删除该非空分类')
      else {
        this.delDialog = true
        this.delTagName = tag.name
        this.delTagId = tag._id
      }
    },
    remove() {
      delTag(this.delTagId).then(res => {
        if (res.status === 200) {
          for (const item of this.items) {
            if (item._id === this.delTagId) {
              const index = this.items.indexOf(item)
              this.items.splice(index, 1)
              this.$notify.success(`成功删除 ${this.delTagName} 标签`)
            }
          }
        } else this.$notify.error(`删除标签 ${this.delTagName} 失败`)
        this.delDialog = false
      })
    },
    handleUpdate(tag) {
      this.tagName = tag.name
      this.updateTagId = tag._id
      this.dialog = true
      this.mode = 'update'
    },
    handleSave() {
      if (!this.tagName) {
        this.$notify.warning('标签名不能为空')
      } else if (this.mode === 'add') {
        addTag(this.tagName).then(res => {
          if (res.status === 200) {
            this.items.push(res.data.tag)
            this.$notify.success('添加标签成功')
          }
        })
      } else if (this.mode === 'update') {
        updateTag(this.updateTagId, this.tagName).then(res => {
          if (res.status === 200) {
            for (const item of this.items) {
              if (item._id === this.updateTagId) {
                const index = this.items.indexOf(item)
                this.items[index].name = res.data.tag.name
                this.$notify.success('修改成功')
                break
              }
            }
          }
        })
      }
      this.dialog = false
    }
  },
  mounted() {
    this.getDataFromApi()
  }
}
</script>

<style scoped>

</style>
